<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .nav {
            margin-bottom: 20px;
        }
        .nav a {
            display: inline-block;
            padding: 5px 10px;
            background-color: #ddd;
            color: #333;
            text-decoration: none;
            border-radius: 3px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .form-container {
            margin-top: 20px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .btn-danger {
            background-color: #f44336;
        }
        .btn-danger:hover {
            background-color: #d32f2f;
        }
        .search-container {
            margin-bottom: 20px;
            display: flex;
        }
        .search-container input {
            flex: 1;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav">
            <a href="/">返回首页</a>
        </div>
        
        <h1>课程管理</h1>
        
        <!-- 搜索框 -->
        <div class="search-container">
            <input type="text" id="searchInput" placeholder="输入课程名称搜索">
            <button onclick="searchCourses()">搜索</button>
            <button onclick="fetchCourses()">显示全部</button>
        </div>
        
        <div id="courseList">
            <h2>课程列表</h2>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>课程编号</th>
                        <th>课程名称</th>
                        <th>最大容量</th>
                        <th>已选人数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="courseTableBody">
                    <!-- 课程数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
        
        <div class="form-container">
            <h2>添加/编辑课程</h2>
            <form id="courseForm">
                <input type="hidden" id="courseId">
                
                <div class="form-group">
                    <label for="courseCode">课程编号:</label>
                    <input type="text" id="courseCode" required>
                </div>
                
                <div class="form-group">
                    <label for="courseName">课程名称:</label>
                    <input type="text" id="courseName" required>
                </div>
                
                <div class="form-group">
                    <label for="maxCapacity">最大容量:</label>
                    <input type="number" id="maxCapacity" min="1" required>
                </div>
                
                <button type="submit">保存</button>
                <button type="button" onclick="resetForm()">重置</button>
            </form>
        </div>
    </div>
    
    <script>
        // 页面加载完成后获取课程列表
        document.addEventListener('DOMContentLoaded', function() {
            fetchCourses();
            
            // 表单提交处理
            document.getElementById('courseForm').addEventListener('submit', function(e) {
                e.preventDefault();
                saveCourse();
            });
        });
        
        // 获取所有课程
        function fetchCourses() {
            fetch('/api/courses')
                .then(response => response.json())
                .then(data => {
                    displayCourses(data);
                })
                .catch(error => {
                    console.error('获取课程数据出错:', error);
                });
        }
        
        // 搜索课程
        function searchCourses() {
            const searchTerm = document.getElementById('searchInput').value.trim();
            if (!searchTerm) {
                fetchCourses();
                return;
            }
            
            fetch(`/api/courses/search?name=${encodeURIComponent(searchTerm)}`)
                .then(response => response.json())
                .then(data => {
                    displayCourses(data);
                })
                .catch(error => {
                    console.error('搜索课程出错:', error);
                });
        }
        
        // 显示课程列表
        function displayCourses(courses) {
            const tableBody = document.getElementById('courseTableBody');
            tableBody.innerHTML = '';
            
            courses.forEach(course => {
                const row = document.createElement('tr');
                
                row.innerHTML = `
                    <td>${course.id || ''}</td>
                    <td>${course.courseCode || ''}</td>
                    <td>${course.courseName || ''}</td>
                    <td>${course.maxCapacity || 0}</td>
                    <td>${course.currentEnrollment || 0}</td>
                    <td>
                        <button onclick="editCourse(${course.id})">编辑</button>
                        <button class="btn-danger" onclick="deleteCourse(${course.id})">删除</button>
                    </td>
                `;
                
                tableBody.appendChild(row);
            });
        }
        
        // 保存课程信息
        function saveCourse() {
            const courseId = document.getElementById('courseId').value;
            const courseData = {
                courseCode: document.getElementById('courseCode').value,
                courseName: document.getElementById('courseName').value,
                maxCapacity: parseInt(document.getElementById('maxCapacity').value),
                currentEnrollment: 0 // 新课程默认为0
            };
            
            let url = '/api/courses';
            let method = 'POST';
            
            if (courseId) {
                url = `/api/courses/${courseId}`;
                method = 'PUT';
                courseData.id = courseId;
            }
            
            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(courseData),
            })
            .then(response => response.json())
            .then(data => {
                resetForm();
                fetchCourses();
            })
            .catch(error => {
                console.error('保存课程信息出错:', error);
            });
        }
        
        // 编辑课程
        function editCourse(id) {
            fetch(`/api/courses/${id}`)
                .then(response => response.json())
                .then(course => {
                    document.getElementById('courseId').value = course.id;
                    document.getElementById('courseCode').value = course.courseCode;
                    document.getElementById('courseName').value = course.courseName;
                    document.getElementById('maxCapacity').value = course.maxCapacity;
                })
                .catch(error => {
                    console.error('获取课程详情出错:', error);
                });
        }
        
        // 删除课程
        function deleteCourse(id) {
            if (confirm('确定要删除这个课程吗？')) {
                fetch(`/api/courses/${id}`, {
                    method: 'DELETE',
                })
                .then(response => response.json())
                .then(success => {
                    if (success) {
                        fetchCourses();
                    } else {
                        alert('删除失败');
                    }
                })
                .catch(error => {
                    console.error('删除课程出错:', error);
                });
            }
        }
        
        // 重置表单
        function resetForm() {
            document.getElementById('courseId').value = '';
            document.getElementById('courseCode').value = '';
            document.getElementById('courseName').value = '';
            document.getElementById('maxCapacity').value = '';
        }
    </script>
</body>
</html> 